import React, { useEffect, Component, useRef, createRef } from 'react';
import Form, { Field } from '../components/my-rc-field-form';
// import Form, { Field } from 'rc-field-form';
import Input from '../components/Input';

const nameRule = { required: true, message: '姓名必填' };
const passwordRule = { required: true, message: '密码必填' };

export default class MyRcFieldFormClass extends Component {
  form = createRef();
  onFinish = (val) => {
    console.log('onFinish==>', val);
  };
  onFinishFailed = (val) => {
    console.log('onFinishFailed==>', val);
  };
  componentDidMount() {
    console.log('form==>', this.form.current);
    this.form.current.setFieldsValue({ username: 'default' });
  }
  render() {
    return (
      <div>
        <h3>MyRcFieldForm</h3>
        <Form ref={this.form} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
          <Field name="username" rules={[nameRule]}>
            <Input placeholder="username" />
          </Field>
          <Field name="password" rules={[passwordRule]}>
            <Input placeholder="password" />
          </Field>
          <button>submit</button>
        </Form>
      </div>
    );
  }
}

// export default function MyRcFieldFormFun() {
//   const [form] = Form.useForm();

//   const onFinish = (val) => {
//     console.log('onFinish==>', val);
//   };

//   const onFinishFailed = (val) => {
//     console.log('onFinishFailed==>', val);
//   };

//   useEffect(() => {
//     console.log('form==>', form);
//     form.setFieldsValue({ username: 'default' });
//   }, []);

//   return (
//     <div>
//       <h3>MyRcFieldForm</h3>
//       <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
//         <Field name="username" rules={[nameRule]}>
//           <Input placeholder="username" />
//         </Field>
//         <Field name="password" rules={[passwordRule]}>
//           <Input placeholder="password" />
//         </Field>
//         <button>submit</button>
//       </Form>
//     </div>
//   );
// }
